<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>清除浮动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
   <style>
   
   .content{
			 	  width: 500px;
			 	  /* height: 300px; */
			 	  background-color: pink;

			 	  /* overflow:hidden; */   /* 清除浮动方式二
                                             给父盒子设置overflow:hidden 
                                             如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。*/
			 }

			 .left{
				width:200px;
				height: 300px;
				background-color: #CC12F2;
				float: left;
		   }

		   .right{
				width:300px;
				height: 300px;
				background-color:#1CCBEA;
				float: left;
		   }

		   .footer{
				height: 50px;
				width:500px;
				background-color: black;
		   }
			  
     
          /* 清除浮动方式一 */

			  /* .clearfix{
			 	 clear: both;
			   }  */

    /* 清除浮动方式三 
    这个是最好的一种清除浮动的方法
    */
			
 
		    /* 清除浮动方式三 */
			
			.clearfix:after{
				content:"";
				display: block;
				clear: both;
				height:0;
				line-height:0;
				visibility: hidden;
			}
			.clearfix{
				zoom: 1;     /* 为了兼容IE浏览器 */
			}





   </style>




</head>
<body>

    
       <!-- 清除浮动
        ☞清除浮动不是删除浮动
        ☞清除浮动指的是清除浮动的影响
    
       注意：
         当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。这种情况下进行清除浮动。 -->
    

         
    		 <div class="content clearfix">   
                 <!-- 只需要在父级里面填加类就可以了 -->
                    <div class="left"></div>
                    <div class="right"></div>
              
                 <!-- <div class="clearfix"></div>  -->
  
               </div>
               <div class="footer"></div>
  
</body>
</html>